<template lang="html">
	<div >
	<div  id="">
     <div id="my">
     	 <div class="car my">
	      	<div @click="back" id="fanhui">
	      		<img src="../../static/img/houtui.png" />
	      	</div>
	      	<div id="">登录</div>
	      	<div @click="zhuce" style="font-size: .22rem;">快速注册</div>
      	</div>
       <!--<!--寺库图-->
	     <div class="siku">
	     	<img src="//mpic.secooimg.com/images/2017/05/18/login_uri.png"/>
	     </div>

     <!--登录页面-->
      	<div class="load">
      		<div style="color: gray;">用户名：<input @focus="guangbiao" v-model="u" type="text"></div>
      		<div style="color: gray;"> &nbsp;密&nbsp;&nbsp;码：<input  v-model="p" 			type="password"></div>
      		<div v-show="flags" id="denglu1" @click="denglu" 				class="denglu">{{succe}}</div>
      		<div v-show="flag1" @click="denglu"
      				class="denglu">{{succe}}</div>
      		</div>
      	</div>
      </div>
     </div>
   </div>
</template>

<script>
import Success from '../components/success'
import Tiao from '../components/tiaozhuan'
import Bus from '../route/bus';
export default {

	data(){
		return{
			user:[],
			passer:[],
			u:[],
			p:[],
			us:'',
			ps:'',
			bol:getCookie('bol'),
			flag:true,
			flags:false,
			flag1:true,
			flag2:false,
			succe:'登录',
			href:"http://m.secoo.com/user.html?addFrom=page_app_wapIndex"
		}
	},
	components:{
		Success,
		Tiao
	},
	methods:{
		back(){
		location.replace('/first')
		},
		guangbiao(){
			
		},
		denglu(){
			var users=this.u;
			function trim(str){ //删除左右两端的空格
　　    		 return str.replace(/(^\s*)|(\s*$)/g, "");
　　			 }
			if(trim(this.user)==trim(users)&&trim(this.passer)==trim(this.p)){
				//登录成功的页面
				console.log('success')
				this.flag=false;
				this.$router.push({path:'/components/success'})
				setCookie('user',this.u,'2');
				setCookie('passer',this.p,'2')
			}else if(trim(getCookie('passer1'))==trim(users)&&trim(getCookie('user1'))==trim(this.p)&&
			trim(users).length>0){
				console.log('success')
				this.$router.push({path:'/components/success'})
				this.flag=false;
				//免登陆条件
				setCookie('bol',true,'2')
			}
			else{
				//登录失败
				console.log('fail')
//				console.log(getCookie('passer1'))
//				console.log(getCookie('user1'))
//				console.log(trim(this.p))
//				console.log(trim(users))
				console.log(trim(this.p)>0)
				this.flags=true;
				this.flag1=false;
				this.succe='登录失败!请重新登录..'
				this.u='';
				this.p='';
				setTimeout(()=>{this.succe='登录';this.flags=false;this.flag1=true},1500)
			}
		},
		zhuce(){

			 this.$router.push({path:'/components/tiaozhuan'})
		},

	},
	created(){
		function trim(str){ //删除左右两端的空格
　　    		 return str.replace(/(^\s*)|(\s*$)/g, "");
　　			 }
//		setCookie('bol',true,'2')
		//bus传值;
		Bus.$on('getTar',showss=>{
	         this.us=showss
	         showss=trim(showss)
		if(this.us.length>0){
		setCookie('user1',showss,'2');
		}
		})
		Bus.$on('getTarget', shows => {
            this.ps=shows;
            shows=trim(shows)
            if(this.ps.length>0){
		setCookie('passer1',shows,'2');
		}
        });
        Bus.$on('del', dels=> {
        	setCookie('bol',dels,'2')
        })
		this.$on('listen',function(val){
			console.log(val)
		})
		this.u=' '
		//请求json数据
		this.axios.get('../../static/data/load.json').then(data=>{
//           a=data.data.load[0].user;
             this.user=data.data.load[0].user;
             this.passer=data.data.load[0].passer;
        })

	},
	mounted(){
		console.log(getCookie('user'))
		if(getCookie('user').length>0){
		 this.u= getCookie('user')+' ';
		 this.p=getCookie('passer');
		}
		else if(getCookie('user1')>0){
		 	this.u=getCookie('user1')+' ';
		 	this.p=getCookie('passer1');
		}
	},
	watch:{    
		//免登陆
		 u(newValue,oldValue){
			function trim(str){ //删除左右两端的空格
　　    		 return str.replace(/(^\s*)|(\s*$)/g, "");
　　			 }
		if(trim(newValue)==trim(getCookie('user'))&&trim(newValue).length>0){
				this.$router.push({path:'/components/success'})

			}else if(this.bol=='true'&&trim(newValue)==trim(getCookie('user1'))&&trim(newValue).length>0){
				this.$router.push({path:'/components/success'})

			}
		},
		 p(newValue,oldValue){
		 	function trim(str){ //删除左右两端的空格
　　    		 return str.replace(/(^\s*)|(\s*$)/g, "");
　　			 }
		if(trim(newValue)==trim(getCookie('passer'))&&trim(newValue).length>0){
				this.$router.push({path:'/components/success'})

			}else if(this.bol=='true'&&trim(newValue)==trim(getCookie('passer1'))&&trim(newValue).length>0){
				this.$router.push({path:'/components/success'})

			}
		 }
	}

}
</script>

<style lang="css">
	html{
		background: white;
	}
	.boxd{
		background: white;
		height: 11rem;
	}
	#my{
		background: white;
		width: 100%;
		margin-top:0rem;    
	}
	h1{
		text-align: center;
		color:red;
	}
	.my{
		width: 100%;
		height: 1rem;
		border-bottom: 1px solid lightgray;
	}
	.car{
		display: flex;
		justify-content: space-around;
		flex-wrap: nowrap;
		align-items:flex-start;

	}
	.car{
		text-align: center;
		color:gray;
		font-size: .3rem;
		font-weight: bold;
		line-height: 1rem;
	}
	.load div input{
		width: 60%;
		height: .3rem;
		font-size: .3rem;
		/*border: 1px solid black;*/
		border:none;
		border-bottom: .05rem solid gray;
	}
	.car>div img{
		width: .25rem;
		height: .25rem;
	}
	.siku{
		width: 100%;
		height: 3rem;
		overflow: hidden;
	}
	.siku>img{
		display: block;
		width: 1.5rem;
		height: 1.5rems;
		text-align: center;
		margin: .8rem auto;
	}
	.load{
		background: white;
		margin-top: 1rem;
		width: 100%;
		position: fixed;
		top: 3.5rem;
	}
	.load div{
		margin-top: .8rem;
		text-align: center;
		font-size: .3rem;
		font-weight: bold;
	}
	.denglu{
		width: 82%;
		margin-left:.5rem;
		height: .7rem;
		text-align: center;
		line-height: .7rem;
		margin: .5rem auto;
		background-color: black;
		color: white;
	}
	#denglu1{
		color: red;
	}
</style>
